<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      table,
      th,
      td {
        border: 1px solid rgb(17, 250, 114);
        border-collapse: collapse;
        text-align: center;
      }
      table {
        width: 500px;
        margin: 100px auto 0;
      }
      td,
      th {
        height: 60px;
      }
      span {
        color: rgb(252, 19, 19);
      }
      del {
        color: #ccc;
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th><input type="checkbox" id="ckAll" />全选</th>
        <th>菜品</th>
        <th>单价</th>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="ck-item" />
        </td>
        <td>红烧大猪蹄</td>
        <td>
          <span>￥0.1</span>
          <del>￥999</del>
        </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="ck-item" />
        </td>
        <td>清蒸大萝卜</td>
        <td>
          <span>￥9.9</span>
          <del>￥29.9</del>
        </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="ck-item" />
        </td>
        <td>爆炒大腰子</td>
        <td>
          <span>￥32.9</span>
          <del>￥68.9</del>
        </td>
      </tr>
    </table>
    <script>
      var all = document.getElementById('ckAll')
      var cks = document.getElementsByClassName('ck-item')
      all.onclick = function () {
        for (var i = 0; i < cks.length; i++) {
          cks[i].checked = this.checked
        }
      }

      for (var j = 0; j < cks.length; j++) {
        cks[j].onclick = function () {
          var flag = true
          for (var k = 0; k < cks.length; k++) {
            if (!cks[k].checked) {
              flag = false
              break
            }
          }
          all.checked = flag
        }
      }
    </script>
  </body>
</html>
